<script lang="ts">
import {defineComponent,computed} from "vue"

export default defineComponent({
  name: "AppProgress",
  props: {
    progress: {
      type: Number,
    }
  },
  setup(props) {
    const width=computed(()=>{
      return props.progress + '%'
    })
    return {width}
  }
})
</script>

<template>
  <div class="app-progress">
    <div class="progress-num">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
.app-progress {
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid var(--el-color-primary-light-3);
  height: 100%;
  width: 100%;

  .progress-num {
    box-sizing: border-box;
    padding: 2px;
    display: inline-flex;
    background-color: var(--el-color-primary-light-9);
    height: 100%;
    width: v-bind(width);
    max-width: 100% !important;
  }
}
</style>